<!DOCTYPE html> 
<html>
	<head>
		<title>Sky Forms Pro</title>
		
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
		
		<link rel="stylesheet" href="css/demo.css">
		<link rel="stylesheet" href="css/font-awesome.css">
		<link rel="stylesheet" href="css/sky-forms.css">
		<!--[if lt IE 9]>
			<link rel="stylesheet" href="css/sky-forms-ie8.css">
		<![endif]-->
		
		<script src="js/jquery.min.js"></script>
		<script src="js/jquery.validate.min.js"></script>
		<!--[if lt IE 10]>
			<script src="js/jquery.placeholder.min.js"></script>
		<![endif]-->		
		<!--[if lt IE 9]>
			<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
			<script src="js/sky-forms-ie8.js"></script>
		<![endif]-->
	</head>
	
	<body class="bg-cyan">
		<div class="body">					
			<form action="" id="sky-form" class="sky-form">
				<header>Available validation rules</header>
				
				<fieldset>
					<div class="row">
						<section class="col col-6">
							<label class="label">Required field</label>
							<label class="input">
								<i class="icon-append fa fa-asterisk"></i>
								<input type="text" name="required">
							</label>
						</section>
						<section class="col col-6">
							<label class="label">Email validation</label>
							<label class="input">
								<i class="icon-append fa fa-envelope"></i>
								<input type="email" name="email">
							</label>
						</section>
					</div>
					
					<div class="row">
						<section class="col col-6">
							<label class="label">URL validation</label>
							<label class="input">
								<i class="icon-append fa fa-globe"></i>
								<input type="url" name="url">
							</label>
						</section>
						<section class="col col-6">
							<label class="label">Date validation</label>
							<label class="input">
								<i class="icon-append fa fa-calendar"></i>
								<input type="text" name="date">
							</label>
						</section>
					</div>
					
					<div class="row">
						<section class="col col-4">
							<label class="label">Minimum length</label>
							<label class="input">
								<i class="icon-append fa fa-asterisk"></i>
								<input type="text" name="min">
							</label>
						</section>
						<section class="col col-4">
							<label class="label">Maximum length</label>
							<label class="input">
								<i class="icon-append fa fa-asterisk"></i>
								<input type="text" name="max">
							</label>
						</section>
						<section class="col col-4">
							<label class="label">Range length</label>
							<label class="input">
								<i class="icon-append fa fa-asterisk"></i>
								<input type="text" name="range">
							</label>
						</section>
					</div>
				</fieldset>
				
				<fieldset>
					<div class="row">
						<section class="col col-6">
							<label class="label">Digits validation</label>
							<label class="input">
								<i class="icon-append fa fa-asterisk"></i>
								<input type="text" name="digits">
							</label>
						</section>
						<section class="col col-6">
							<label class="label">Decimal number validation</label>
							<label class="input">
								<i class="icon-append fa fa-asterisk"></i>
								<input type="text" name="number">
							</label>
						</section>
					</div>
					
					<div class="row">
						<section class="col col-4">
							<label class="label">Minimum value</label>
							<label class="input">
								<i class="icon-append fa fa-asterisk"></i>
								<input type="text" name="minVal">
							</label>
						</section>
						<section class="col col-4">
							<label class="label">Maximum value</label>
							<label class="input">
								<i class="icon-append fa fa-asterisk"></i>
								<input type="text" name="maxVal">
							</label>
						</section>
						<section class="col col-4">
							<label class="label">Range value</label>
							<label class="input">
								<i class="icon-append fa fa-asterisk"></i>
								<input type="text" name="rangeVal">
							</label>
						</section>
					</div>
				</fieldset>
				
				<footer>
					<button type="submit" class="button">Submit</button>
					<button type="button" class="button button-secondary" onclick="window.history.back();">Back</button>
				</footer>
			</form>
		</div>
		
		<script type="text/javascript">
			$(function()
			{
				// Validation
				$("#sky-form").validate(
				{					
					// Rules for form validation
					rules:
					{
						required:
						{
							required: true
						},
						email:
						{
							required: true,
							email: true
						},
						url:
						{
							required: true,
							url: true
						},
						date:
						{
							required: true,
							date: true
						},
						min:
						{
							required: true,
							minlength: 5
						},
						max:
						{
							required: true,
							maxlength: 5
						},
						range:
						{
							required: true,
							rangelength: [5, 10]
						},
						digits:
						{
							required: true,
							digits: true
						},
						number:
						{
							required: true,
							number: true
						},
						minVal:
						{
							required: true,
							min: 5
						},
						maxVal:
						{
							required: true,
							max: 100
						},
						rangeVal:
						{
							required: true,
							range: [5, 100]
						}
					},
										
					// Messages for form validation
					messages:
					{
						required:
						{
							required: 'Please enter something'
						},
						email:
						{
							required: 'Please enter your email address'
						},
						url:
						{
							required: 'Please enter your URL'
						},
						date:
						{
							required: 'Please enter some date'
						},
						min:
						{
							required: 'Please enter some text'
						},
						max:
						{
							required: 'Please enter some text'
						},
						range:
						{
							required: 'Please enter some text'
						},
						digits:
						{
							required: 'Please enter some digits'
						},
						number:
						{
							required: 'Please enter some number'
						},
						minVal:
						{
							required: 'Please enter some value'
						},
						maxVal:
						{
							required: 'Please enter some value'
						},
						rangeVal:
						{
							required: 'Please enter some value'
						}
					},					
					
					// Do not change code below
					errorPlacement: function(error, element)
					{
						error.insertAfter(element.parent());
					}
				});
			});			
		</script>
	</body>
</html>